<template>
    <div class="shopType">
        <head-top></head-top>
        <div class="info">
            
            <div class="tablebox">
                <el-button size="small" @click="addShopType" type="primary">新增分类</el-button>
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="name" label="分类"></el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClick(scope.row,'del')"
                                type="text"
                                size="small"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import headTop from "@/components/headTop";
import { storeTypeSave, storeTypeQueryAll, storeTypeDelete } from "../server/api.js";
export default {
    name: "shopAll",
    components: {
        headTop
    },
    data() {
        return {
            labelWidth: "100px",
            tableData:[],
            shopForm: {
                maxNum: 10,
                level: 1
            },
        };
    },
    created() {
        this.dataInit();
    },
    methods: {
        async dataInit() {
            var _list = await storeTypeQueryAll();
            this.tableData = _list;
        },
        onSubmit() {},
        addShop() {
            // this.$refs.shopForm.resetFields();
            this.shopForm = {
                maxNum: 10,
                level: 1
            }
            this.dialogVisible = true;
        },
         addShopType() {
            this.$prompt('请输入要添加的类别', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then( async ({ value }) => {
                if(!value){
                    this.$message({
                        type: "error",
                        message: '请输入要添加的分类'
                    });
                }
             try {
                    let _list = await storeTypeSave({
                        name:value
                    });
                    this.$message({
                        type: "success",
                        message: '分类保持成功'
                    });
                    this.dataInit();
                } catch (error) {
                    this.$message({
                        type: "error",
                        message: error
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });       
            });
            
        },
        handleClick(row, type) {
            if (type === "del") {
                this.$confirm("是否删除该分类?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true
                })
                    .then(async () => {
                        try {
                            let _list = await storeTypeDelete({
                                id: row.id
                            });

                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.tableData = _list;
                        } catch (error) {
                            this.$message({
                                type: "error",
                                message: error
                            });
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            } else {
                // 编辑
                this.shoptype = "edit";
                this.shopForm = this.$.cloneObj(row);
                this.dialogVisible = true;
            }
        }
    }
};
</script>
<style lang="less">
.shopType {
    .info {
        padding: 20px;
    }
    .tablebox {
        padding-top: 10px;
    }
}
</style>